<%inherit file="appliance_base.html" />

<%block name="innav">
<li>${ appliance.name }</li>
</%block>

<%block name="submain">

<div id="appliance-view">

  <div id="appliance-summary" class="row-fluid">

    <div class="span3">
      <img class="logo" src="${ appliance.logourl }" alt="Logo" />
    </div>

    <div class="span9">
      <h2>${ appliance.name }</h2>
      <div class="owner">${ _("Owner") }
        <a href="${ reverse_url('user:view') }?id=${ appliance.user_id }">${ appliance.user.username }</a></div>
      <div class="summary muted">
        % if appliance.summary:
        ${ appliance.summary }
        % else:
        ${ _("This is a appliance of LuoYun platform, you can create a instance from it.") }
        % endif
      </div>
    </div>

  </div>

  <div id="appliance-detail" class="row-fluid">

    <div class="span3">
      <div id="create-instance-btn">
        % if appliance.isuseable:
        <a class="btn btn-primary" href="${ reverse_url('myun:instance:create') }?appliance_id=${ appliance.id }" title="${ _('You can create a new instance based on this appliance.') }">${ _("Create Instance") }</a>
        % else:
        <a class="btn btn-large btn-primary disabled" title="${ _('This appliance is locked, you can not use it.') }">${ _("Create Instance") }</a>
        % endif

      </div>
      <br>
      <p><a class="btn" href="${ reverse_url('myun:appliance:baseinfo:edit') }?id=${ appliance.id }">${ _("Edit") }</a></p>
    </div>

    <div class="span9">

      <h1>${ _("Screenshot") }</h1>

      <p>
        <a class="btn btn-primary ly-async-opt" href="${ reverse_url('appliance:screenshot:add') }?appliance_id=${ appliance.id }">${ _("Add Screenshot") }</a>
        <a class="btn btn-primary ly-async-opt" href="${ reverse_url('appliance:screenshot:management') }?appliance_id=${ appliance.id }">${ _("Management") }</a>
      </p>

      <div id="appliance-thumnails" class="text-center">
        <div class="carousel slide" id="myCarousel">
          <div class="carousel-inner">
            % for INDEX, S in enumerate(appliance.screenshots):
            % if INDEX == 0:
            <div class="item active">
            % else:
            <div class="item">
            % endif
              <a href="${ S.url }"><img src="${ S.thumb_url }"></a>
            </div>
            % endfor
          </div>
          <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
          <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>
      </div>

      <dl class="dl-horizontal">
        <dt>${ _("Catalog") }</dt>
        <dd><a href="${ reverse_url('appliance:index') }?c=${ appliance.catalog_id }">${ appliance.catalog_name }</a></dd>

        <dt>${ _("Used") }</dt>
        <dd>${ len(appliance.instances) } ${ _("times") }</dd>

        <dt>${ _("Create Time") }</dt>
        <dd>${ ftime(appliance.created) }</dd>

        <dt>${ _("Update Time") }</dt>
        <dd>${ ftime(appliance.updated) }</dd>
      </dl>

      % if appliance.description:
      <div class="description">
        <h2>${ _("About The Appliance") }</h2>
        <div id="appliance-description" class="markdown">
          ${ appliance.description_html }
        </div>
      </div>
      % endif
    </div>

  </div>
</div>


## Normal Ajax option
<div style="display:none;" id="ly-async-window" class="modal hide fade">
  <div class="text-center">
    <p>${ _("Please waiting") }</p>
    <img src="${ static_url('image/running.gif') }" />
  </div>
</div>
<div style="display:none;" id="ly-async-500">
  <div class="modal-header">
    <h1>${ _("Internal Server Error") }</h1>
  </div>
  <div class="modal-body">
    <p class="statusText"></p>
    <div class="notification-help">
      <p class="subtitle"><i class="icon-lightbulb"></i> ${ _("If you have any questions, you can contact the admin by following method:") }</p>
   </div>
  </div>
  <div class="modal-footer">
    <input type="button" class="btn" value="Close" data-dismiss="modal">
  </div>
</div>

<script type="text/javascript">
$( function() {
  ly_async_opt()
});
</script>

</%block>
